<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="input1">:<input type="text" id="input2">:<input type="text" id="input3">
<br>
<p id="content"></p>
<button id="btn">下一秒</button>
<script>
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var p = document.getElementById("content");
var btn = document.getElementById("btn");
btn.onclick = function (){
    var hour = +input1.value;
    var minute = +input2.value;
    var second = +input3.value;
    if(hour > 24){
        input1.value = "你的输入不合法"
        input1.focus();
        return;
    }
    if(minute > 59){
        input2.value = "你的输入不合法"
        input2.focus();
        return;
    }
    if(second > 59){
        input3.value = "你的输入不合法"
        input3.focus();
        return;
    }
    
    second++;
    if (second == 60){
        second = 0;
        minute++;
        if (minute == 60){
            minute = 0;
            hour++;
            if (hour == 24){
                hour = 0;
            }
        }
    }
    p.innerHTML = hour + ":" + minute + ":" + second;

}
</script>
</body>

</html>